<template>

	<view>

		<cu-custom bgColor="bg-gradual-red" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">凯西商城</block>
		</cu-custom>

		<view class="cu-bar search bg-white fixed" :style="{top: CustomBar +'px'}">
			
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				
				<navigator open-type="navigate" url="../search/search">				
					<input  :adjust-position="false"   disabled="disabled"  type="text" placeholder="搜索图片、文章、视频"
					 confirm-type="search"></input>
				 </navigator>
				 
			</view>
	
		</view>




		<!-- 首页商品展示区域-->
		<view class="grid col-2 margin-top-sm">
			<view class="padding-xs" v-for="(item ,index)  in  products" v-bind:key="index">
				<view class="padding radius text-center shadow-blur bg-white">
					<view>
						<navigator open-type="navigate"  :url="'../detail/detail?id='+item.spuId">
							<image v-bind:src="imageSrc+item.image" mode="aspectFit"></image>
						</navigator>
					</view>
					<view class="text-lg">{{item.name}}</view>
					<view class="margin-top-sm text-price">
						{{item.price}} 
					</view>
				</view>
			</view>
		</view>


	<!-- end-->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					pageNum: 1,
					pageSize: 10,
					query: ''
				},
				products: [],
				imageSrc: this.$global.imageSrc,
				CustomBar:this.CustomBar



			}
		},
		onLoad() {
			//在這裏查詢商品數據 掉商品展示接口
			this.init()
		},
		onShow:function(){
			//判断数组是否为空(length==0)
				
		},
		onReachBottom: function() {
			//当页面接触到底部的时候触发的方法 
			uni.showToast({
				title: '正在拉取数据',
				duration: 3000

			})
			this.params.pageNum++;
			this.init()

		},
		//下拉刷新
		onPullDownRefresh: function() {
			//重新初始化
			this.products = [];
			this.params.pageNum = 1;
			this.pageSize = 10;
			this.query = '';
			this.init(); //异步的网络请求   初始化还没有完毕呢  可能就去停止动画了
			uni.stopPullDownRefresh();


		},
		methods: {
			init: function() {
				this.$api.__api__skus(this.params).then((res) => {
					//查询商品已经成功
					let list = res.data.list;
					for (let i = 0; i < list.length; i++) {
						this.products.push(list[i])
					}
				})
			}


		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
